<template>
  <div class="viewListTop">
    <img src="" alt="" />
    <div class="listViewTopNav">
      <div class="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
        <div class="title">歌单</div>
      </div>
      <!-- right -->
      <div class="right">
        <div class="search">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo1"></use>
          </svg>
        </div>
        <div class="config">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-31liebiao"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, getCurrentInstance, Ref, defineProps } from 'vue'
import { useRoute } from 'vue-router'
export default {
  name: 'ViewListTop',
  setup(props) {
    console.log(4444444444444, props)
    console.log(5555555555555, props.playlist)
    return {}
  },
}
</script>
<style lang="less" scoped>
.viewListTop {
  .listViewTopNav {
    padding: 0.4rem 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .back {
      display: flex;
      .icon {
        width: 0.5rem;
        height: 0.5rem;
      }
      .title {
        margin-left: 0.3rem;
        font-size: 0.4rem;
        text-align: center;
        line-height: 0.6rem;
      }
    }
    .right {
      .icon {
        width: 0.5rem;
        height: 0.5rem;
      }
      display: flex;
      .search {
        margin-right: 0.5rem;
        .icon {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
  }
}
</style>
